<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="http://assets.cjkt.com/js/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="iconfont.css" />
        <style type="text/css">
            body {
                padding: 0;
                margin: 0;
            }
        .col-3 {
            display: inline-block;
            width: 25%;
        }
        .col-2 {
            display: inline-block;
            width: 20%;
        }
        .times-date{
            
            padding-left:15px;
            padding-top:10px;
            border-top:1px solid #e1e1e1;
            border-bottom:1px solid #e1e1e1;
            background-color: #f8f8f8;
            font-size:15px;
            
            
        }
        
        .bg-white {
            background-color: #fff;
        }
        
        .bg-gray {
            background-color: #f1f5f6;
        }
        
        .fs-12 {
            font-size: 12px;
        }
        
        .text-center {
            text-align: center;
        }
        
        .icon-box {
            position: relative;
            display: inline-block;
            line-height: 20px;
            font-size: 14px;
            padding-left: 12px;
            padding-right: 5px;
        }
        
        .icon-box .iconfont {
            position: absolute;
            left: 0;
            top: 50%;
            -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
            margin-left: -10px;
            font-size: 15px;
            line-height: 1;
            color: #00b7ee;
        }
        
        .p-15 {
            padding: 15px;
        }
        
        .level {
            
            position: absolute;
            
            margin-left:-2px;
            margin-top:2px;
            padding-left:6.4px;
            padding-top:2.5px;
            padding-right:7px;
            padding-bottom:2.5px;
            font-size: 9px;
            color:#ffffff;
            border-radius:2px;
        }
        
        .question {
            
            position:relative;
            text-indent:34.5px;
            
        }
        
        .answer {
            
            padding-left: 47.2px;
            padding-top: 0px;
            padding-bottom: 0px;
            padding-right: 16px;
            position: relative;
            margin-bottom: 20px;
        }
        
        .answer .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 100%;
        }
        
        .questionResultBox {
            
            position:relative;
            padding-top:20.5px;
            padding-left:0px;
            padding-bottom:18px;
            padding-right:12px;
            
        }
        
        .questionResult {
            
            font-size: 13px;
            color:#333333;
            
        }
        
        .showResultBtn {
            
            margin-top:-20px;
            padding-bottom:1px;
            border-bottom:1px solid #1997EB;
            float:right;
            font-size: 13px;
            color:#1997EB;
            
        }
        
        .questionBox {
            
            
            padding-top: 0px;
            padding-bottom: 0px;
            padding-right: 13px;
            position: relative;
            margin-bottom: 20px;
            
        }
        
        .answer .img {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 26px;
            height: 26px;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
        
        .answer-A .img {
            background: url(AA.png) no-repeat;
            background-size: cover;
        }
        
        .answer-A.active .img{
            background: url(A.png) no-repeat;
            background-size: cover;
        }
        
        .answer-B .img {
            background: url(BB.png) no-repeat;
            background-size: cover;
        }
        
        .answer-B.active .img{
            background: url(B.png) no-repeat;
            background-size: cover;
        }
        
        .answer-C .img {
            background: url(CC.png) no-repeat;
            background-size: cover;
        }
        
        .answer-C.active .img{
            background: url(C.png) no-repeat;
            background-size: cover;
        }
        
        .answer-D .img {
            background: url(DD.png) no-repeat;
            background-size: cover;
        }
        
        .answer-D.active .img{
            background: url(D.png) no-repeat;
            background-size: cover;
        }
        
        
        .answer-D.wrong .img,
        .answer-A.wrong .img,
        .answer-B.wrong .img,
        .answer-C.wrong .img
        {
            background: url(uncorrect.png) no-repeat;
            background-size: cover;
        }
        
        .answer-D.right .img,
        .answer-A.right .img,
        .answer-B.right .img,
        .answer-C.right .img
        {
            background: url(correct.png) no-repeat;
            background-size: cover;
        }
        
        
        .detail{
            display: none;
        }
        .btn{
            display: inline-block;
            font-size: 15px;
            border-radius: 5px;
            border: 1px solid #00b7ee;
            background-color: #1997eb;
            color: white;
            width: 110px;
            height: 30px;
            line-height:28px;
            text-align: center;
            margin-left: 10px;
            margin-right: 10px;
        }
        .btn.btn-blue{
            color: #fff;
            background-color: #00b7ee;
        }
        .confirm{
            display: none;
        }
        .canNotTap {
            display: inline-block;
            font-size: 15px;
            border-radius: 5px;
            border: 1px solid #f0f3f8;
            color: black;
            width: 110px;
            height: 30px;
            line-height:28px;
            text-align: center;
            margin-left: 10px;
            margin-right: 10px;
            background-color: #f0f3f8;
        }
        .next{
            display: none;
        }
        .finish{
            display: none;
        }
        img{display:block;max-width:100%}
        #MathJax_Message{display:none}
            </style>
        <script src="http://assets.cjkt.com/js/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
        <script>
            MathJax.Hub.Config({
                               //config:["TeX-AMS-MML_HTMLorMML.js"],
                               MMLorHTML: { prefer: { Firefox: "MML" } },
                               tex2jax: {
                               inlineMath: [['$','$'], ['\\(','\\)']],
                               processEscapes: false
                               },
                               TeX: {
                               equationNumbers: {
                               autoNumber: ["AMS"],
                               useLabelIds: true
                               }
                               },
                               "HTML-CSS": {
                               linebreaks: {
                               automatic: true
                               },
                               scale: 85
                               },
                               SVG: {
                               linebreaks: {
                               automatic: true
                               }
                               }
                               });
                               window.updateMath = function (elementID) {
                                   MathJax.Hub.Queue(["Typeset", MathJax.Hub, elementID]);
                               };
        </script>
    </head>
    <body>
        <div id="showMath" class="bg-white p-15" style="font-size: 16px;line-height: 1.5; position:relative;padding-top:0px">
            <div class="questionBox">
                <div class="level">
                    轻松
                </div>
                <div class="question" style="margin-bottom: 20px;"></div>
            </div>
            <div class="answer answer-A">
                <div class="box">
                    <span class="img"></span>
                </div>
                <div class="answer-content">
                </div>
            </div>
            <div class="answer answer-B">
                <div class="box">
                    <span class="img"></span>
                </div>
                <div class="answer-content">
                </div>
            </div>
            <div class="answer answer-C">
                <div class="box">
                    <span class="img"></span>
                </div>
                <div class="answer-content">
                </div>
            </div>
            <div class="answer answer-D">
                <div class="box">
                    <span class="img"></span>
                </div>
                <div class="answer-content">
                </div>
            </div>
            <hr class="line" style="border:1px dotted #E5E5E5" />
            <div class="questionResultBox">
                <div class="questionResult">
                </div>
                <div class="showResultBtn">
                    查看解析
                </div>
            </div>
            <div class="detail" style="background-color: #ffffff;padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:15px;margin-left: -15px;margin-right: -15px;position: relative;">
                <div class="content" style="font-size: 13px;color:#828282"></div>
            </div>
        </div>
        <script type="text/javascript">
            
            /*这段代码是固定的，必须要放到js中*/
            function setupWebViewJavascriptBridge(callback) {
                if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
                if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
                window.WVJBCallbacks = [callback];
                var WVJBIframe = document.createElement('iframe');
                WVJBIframe.style.display = 'none';
                WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
                document.documentElement.appendChild(WVJBIframe);
                setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
            }
        
        setupWebViewJavascriptBridge(function(bridge) {
                                     
                                     var ques = document.querySelector(".question");
                                     var level = document.querySelector(".level");
                                     var a = document.querySelector(".answer-A .answer-content");
                                     var b = document.querySelector(".answer-B .answer-content");
                                     var c = document.querySelector(".answer-C .answer-content");
                                     var d = document.querySelector(".answer-D .answer-content");
                                     var resultBtn = document.querySelector(".showResultBtn");
                                     var content = document.querySelector(".content");
                                     var result = document.querySelector(".questionResult");
                                     var answers = $(".answer");
                                     var questions = [];
                                     var questionsDic = {};
                                     var questionIndex = 0;
                                     var isLook = false;
                                     var isClick = false;
                                     var isLastPage = false;
                                     var showDetail = true;
                                     var lookState = true;
                                     var questionStr;
                                     var yourAnswer;
                                     bridge.registerHandler('myPraticeGetQuestionData', function(obj, responseCallback) {
                                                            
                                                            $(".right").removeClass("right");
                                                            $(".true").removeClass("true");
                                                            $(".false").removeClass("false");
                                                            $(".wrong").removeClass("wrong");
                                                            $(".active").removeClass("active");
                                                            $(".confirm").removeClass("btn");
                                                            $(".confirm").addClass("canNotTap");
                                                            $(".show").hide();
                                                            $(".next").hide();
                                                            $(".finish").hide();
                                                            $(".detail").hide();
                                                            $(".line").hide();
                                                            $(".questionResultBox").hide();
                                                            resultBtn.innerHTML = "查看解析";
                                                            isClick = false;
                                                            showDetail = true;
                                                            lookState = false;
                                                            questionsDic = obj;
                                                            showQuestion(obj,null,0);
                                                            
                                                            answers.on("click", function() {
                                                                       isClick = true;
                                                                       bridge.callHandler('tapAction', function(responseData) {
                                                                                          
                                                                                          })
                                                                       
                                                                       $(".confirm").removeClass("canNotTap");
                                                                       $(".confirm").addClass("btn");
                                                                       if ($(".right").length == 0 && !isLook) {$(this).addClass("active").siblings().removeClass("active");
                                                                       
                                                                       $(".confirm").css("display","inline-block");
                                                                       }
                                                                       
                                                                       })
                                                            
                                                            if (isLook) {
                                                            $(".review").show();
                                                            $(".confirm").hide();
                                                            $(".look").show();
                                                            } else {
                                                            $(".review").hide();
                                                            $(".look").hide();
                                                            $(".confirm").show();
                                                            }
                                                            $(".show").hide();
                                                            
                                                            })
                                     
                                     function showQuestion(arr1, arr2,index) {
                                     question = arr1;
                                     
                                     ques.innerHTML = question.question;
                                     level.innerHTML = question.hard;
                                     
                                     if(question.hard == "轻松") {
                                     
                                     level.style.backgroundColor= "#47dee0";
                                     
                                     }else if(question.hard == "简单") {
                                     
                                     level.style.backgroundColor = "#81e049";
                                     
                                     }else if(question.hard == "一般") {
                                     
                                     level.style.backgroundColor = "#d0e047";
                                     
                                     }else if(question.hard == "困难") {
                                     
                                     level.style.backgroundColor = "#e09d47";
                                     
                                     }else if(question.hard == "疯狂") {
                                     
                                     level.style.backgroundColor = "#e04e47";
                                     
                                     }
                                     
                                     questionStr = question.answer;
                                     a.innerHTML = question.options.A;
                                     b.innerHTML = question.options.B;
                                     c.innerHTML = question.options.C ? question.options.C : "";
                                     d.innerHTML = question.options.D ? question.options.D : "";
                                     if (question.options.D) {
                                     d.parentNode.style.display = "block";
                                     } else {
                                     d.parentNode.style.display = "none";
                                     }
                                     if (question.options.C) {
                                     c.parentNode.style.display = "block";
                                     } else {
                                     c.parentNode.style.display = "none";
                                     }
                                     
                                     
                                     
                                     content.innerHTML = question.description;
                                     switch (question.answer) {
                                     case "A":
                                     a.parentNode.classList.add("true");
                                     break;
                                     case "B":
                                     b.parentNode.classList.add("true");
                                     break;
                                     case "C":
                                     c.parentNode.classList.add("true");
                                     break;
                                     case "D":
                                     d.parentNode.classList.add("true");
                                     break;
                                     default:
                                     break;
                                     }
                                     
                                     
                                     bridge.registerHandler('change', function(data, responseCallback){
                                                            
                                                            changeLook();
                                                            })
                                     
                                     if (isLook) {
                                     $(".true").addClass("right");
                                     $(".false").addClass("wrong");
                                     $(".review").css("display","inline-block");
                                     $(".confirm").hide();
                                     } else {
                                     $(".review").hide();
                                     $(".confirm").css("display","inline-block");
                                     bridge.registerHandler('check', function (obj, responseCallback) {
                                                            var active = $(".active");
                                                            if (active.is(".true")) {
                                                            active.addClass("right").removeClass("active");
                                                            } else {
                                                            active.addClass("wrong").removeClass("active");
                                                            $(".true").addClass("right");
                                                            }
                                                            })
                                     }
                                     
                                     window.updateMath("showMath");
                                     
                                     
                                     }
                                     function changeLook (){
                                     if (!isLook){isLook = true;
                                     } else{
                                     isLook = false;
                                     }
                                     
                                     }
                                     function getChose() {
                                     return {
                                     answer: $(".active").eq(0)[0].className.match(/answer-[ABCD]/)[0].slice(-1)
                                     }
                                     }
                                     
                                     
                                     $(".look").on("click", function (data, responseCallback) {
                                                   if(showDetail == true){
                                                   $(".detail").slideDown();
                                                   showDetail = false;
                                                   } else {
                                                   showDetail = true;
                                                   $(".detail").slideUp();
                                                   }
                                                   
                                                   
                                                   bridge.callHandler('look', function (responseData) {
                                                                      })
                                                   })
                                     
                                     $(".review").on("click", function () {
                                                     
                                                     bridge.callHandler('review', function (responseData) {
                                                                        
                                                                        })
                                                     
                                                     })
                                     bridge.registerHandler('next', function(obj, responseCallback) {
                                                            
                                                            showQuestion(obj, null, questionIndex);
                                                            })
                                     
                                     $(".next").on("click", function(){
                                                   
                                                   
                                                   bridge.callHandler('nextPage', function () {
                                                                      
                                                                      
                                                                      
                                                                      })
                                                   
                                                   
                                                   })
                                     
                                     $(".finish").on("click", function(){
                                                     
                                                     
                                                     bridge.callHandler('finishClick', function () {
                                                                        
                                                                        
                                                                        
                                                                        })
                                                     
                                                     
                                                     })
                                     
                                     $(".confirm").on("click", function () {
                                                      
                                                      })
                                     
                                     
                                     $(".showResultBtn").on("click", function(){
                                                            
                                                            if(lookState == true){
                                                            $(".detail").slideUp("fast",function(){
                                                                                 
                                                                                 bridge.callHandler('lookResult', function () {
                                                                                                    
                                                                                                    })
                                                                                 
                                                                                 });
                                                            lookState = false;
                                                            resultBtn.innerHTML = "查看解析";
                                                            } else {
                                                            $(".detail").slideDown("fast",function(){
                                                                                   
                                                                                   bridge.callHandler('lookResult', function () {
                                                                                                      
                                                                                                      })
                                                                                   
                                                                                   });
                                                            lookState = true;
                                                            resultBtn.innerHTML = "隐藏解析";
                                                            }
                                                            
                                                            
                                                            
                                                            })
                                     
                                     $(".show").on("click", function () {
                                                   if(lookState == true){
                                                   $(".detail").slideUp();
                                                   lookState = false;
                                                   } else {
                                                   $(".detail").slideDown();
                                                   lookState = true;
                                                   }
                                                   })
                                     
                                     bridge.registerHandler('comfirmClick', function(obj, responseCallback) {
                                                            
                                                            var answerStr = JSON.stringify(getChose().answer);
                                                            yourAnswer = getChose().answer;
                                                            
                                                            var data = {'answer':answerStr};
                                                            bridge.callHandler('confirm', data, function() {
                                                                               
                                                                               })
                                                            
                                                            
                                                            })
                                     
                                     bridge.registerHandler('showDetail', function(time){
                                                            
                                                            var timeStr = time;
                                                            
                                                            $(".line").show();
                                                            $(".questionResultBox").show();
                                                            
                                                            result.innerHTML = "正确答案：" + question.answer + "&nbsp;&nbsp;你的答案：" + yourAnswer + "&nbsp;&nbsp;做题用时：" + timeStr.time;
                                                            
                                                            
                                                            })
                                     
                                     bridge.registerHandler('comfirmResult',function(time){
                                                            
                                                            var timeStr = time;
                                                            
                                                            if(isClick == true){
                                                            $(this).hide();
                                                            
                                                            if(isLastPage) {
                                                            
                                                            $(".finish").css("display", "inline-block");
                                                            
                                                            }else {
                                                            
                                                            $(".next").css("display", "inline-block");
                                                            
                                                            }
                                                            
                                                            
                                                            $(".line").show();
                                                            $(".questionResultBox").show();
                                                            lookState = false;
                                                            var answerStr = JSON.stringify(getChose().answer);
                                                            var data = {'answer': answerStr};
                                                            result.innerHTML = "正确答案：" + questionStr + "&nbsp;&nbsp;你的答案：" + getChose().answer + "&nbsp;&nbsp;做题用时：" + timeStr.time;
                                                            bridge.callHandler('confirm', data, function () {})
                                                            } else {
                                                            
                                                            bridge.callHandler('noClick', function(){
                                                                               
                                                                               })
                                                            
                                                            }
                                                            
                                                            })
                                     
                                     bridge.registerHandler('judgeLastPage',function(){
                                                            
                                                            isLastPage = true;
                                                            
                                                            })
                                     

                                     bridge.registerHandler('hiddenDetail', function(){
                                                            $(".detail").slideUp();
                                                            })
                                     
                                     })
            </script>
    </body>
</html>
